<template>
    <div class="login">
        <div class="login-box">
            <el-card>
                <template slot="header">
                    登录系统
                </template>

                <el-input
                    placeholder="请输入用户名"
                    v-model="username"
                ></el-input>

                <el-input
                    placeholder="请输入用户名"
                    v-model="password"
                ></el-input>

                <el-button @click="onClicked">
                    登录
                </el-button>
            </el-card>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            username: "",
            password: "",
        };
    },
    methods: {
        async onClicked() {
            const { username, password } = this;
            const res = await this.$http.post("/login", { username, password });
            if (res.data.code !== 200) {
                this.$message.error(res.data.message);
                return;
            }
            // 保存用户登录态
            this.$store.commit("loginSuccess", res.data.data);
            // 跳转到
            this.$router.push("/grade");
        },
    },
};
</script>

<style lang="less" scoped>
.login {
    &-box {
        width: 450px;
        position: absolute;
        top: 25%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
</style>
